<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>登录</title>
	<link rel="stylesheet" href="/index/css/common.css">
	<link rel="stylesheet" href="/index/css/login.css">
	<style>

	</style>
</head>
<body>
	<div class="tabsBox">
		<div class="topTab">
			<div class="tabLeft">注册/登录</div>
			<div class="tabCenter"></div>
			<div class="tabRight"></div>
		</div>
	</div>
	<div class="login">
		<div class="l_title">请输入手机号码</div>
		<div class="writePhone">
			<span>+86</span>
			<input type="number" id="phone" placeholder="请输入手机号码">
		</div>
		<div class="writePhone">
			<input type="number" id="code" placeholder="请输入验证码">
			<button class="getCode">获取验证码</button>
		</div>

		<div class="loginBtn">注册/登录</div>


		<div class="intro">注册代表同意<span>用户协议</span>和<span>隐私政策</span></div>

		<div style="text-align:center;margin:15px">
			<a href="https://open.douyin.com/platform/oauth/connect/?{$dy}">
			   <img src="/index/assets/icon/douyin.jpg" style="width:50px;">
			</a>
			<!--<p>抖音登录</p>-->
		</div>
	</div>
</body>
{include file='common/toast'}
<script type="text/javascript" src="/index/js/jquery-3.4.1.min.js"></script>
<script src="/index/js/common.js"></script>
<script type="text/javascript">
	$(function(){
        //绑定手机
        $('.loginBtn').click(function(){

            var phone = $('#phone').val();
            var code = $('#code').val();

            if(!checkPhone(phone)){
                toastFail("请输入正确的手机号");
                return;
            }

            if(!code){
                toastFail("请输入验证码");
                return;
            }

            $.post('{:url("login")}',{phone:phone,code:code},function(res){

                if(res.code==1){

                    location.href=res.url;
//                    toastSuccess('绑定成功',res.url)

                }else{
                    toastFail(res.msg);
                }
            },'json')
        })


        var val = true

        //获取验证码
        $('.getCode').click(function(){


            if(val){

                var phone = $('#phone').val();

                if(!checkPhone(phone)){
                    toastFail('请输入正确的手机号码');

                    return;
                }
                val = false
                $('.getCode').attr('disabled','true');


                $('.getCode').text('发送中...')

                $.post('{:url("phoneCode")}',{phone:phone},function(res){

                    if(res.code==1){
                        let count = 60;
                        let countDown = setInterval(() => {
                                if(count === 0) {
                            $('.getCode').text('重新发送').removeAttr('disabled');
                            clearInterval(countDown)
                            val = true
                        } else {

                            $('.getCode').text(count + 's重新获取')
                        }
                        count--
                    }, 1000)
                    }else{
                        toastFail(res.msg);
                        $('.getCode').text('重新发送').removeAttr('disabled');
                        val = true
                    }
                },'json')


            }
        })
	})
</script>
</html>